<template>
  <div>
    <page-list :x-uri="uri" :custom-components="custom" :doactions="doactions">
      <!-- 自定义tab -->
      <template v-slot:page-tabs>
        <tabs />
      </template>
      <!-- 页面操作按钮 -->
      <template v-slot:page-button>
        <el-dropdown v-auth="'user.student.import'" class="import-student" trigger="click" @command="menuClick">
          <el-button size="mini" type="primary">
            导入学员
            <i class="el-icon-arrow-down el-icon--right" />
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="importVisible">导入附件</el-dropdown-item>
            <el-dropdown-item command="download">下载模板</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-button v-auth="'user.student.create'" size="mini" type="primary" @click="create">新建学员</el-button>
      </template>
      <!-- 多选操作 -->
      <template v-slot:table-button="scope">
        <el-button v-auth="'user.student.edit'" size="mini" @click="disable(scope)">禁用</el-button>
        <el-button v-auth="'user.student.edit'" size="mini" @click="enable(scope)">启用</el-button>
        <el-button v-auth="'user.student.delete'" size="mini" @click="deletes(scope)">删除</el-button>
      </template>
    </page-list>
    <import-student :visible.sync="importVisible" />
  </div>
</template>

<script>
import PageList from '@public/template/page_list.vue';
import Status from './components/status';
import User from './components/user';
import Tabs from './tabs';
import ImportStudent from './components/import_student.vue';

export default {
  components: {
    PageList,
    Tabs,
    ImportStudent
  },
  inject: ['reload'],
  data() {
    return {
      uri: '/user/admin/account/list',
      custom: {
        status: Status,
        user: User
      },
      importVisible: false,
      doactions: [
          { title: '详情', meta: { permission: 'user.student.detail' }, callback: this.study },
          { title: '开课', meta: { permission: 'user.student.course' }, callback: this.openCourse },
          { title: '证书', meta: { permission: 'user.student.cert' }, callback: this.cert },
          { title: '编辑', meta: { permission: 'user.student.edit' }, callback: this.edit },
          { title: '删除', meta: { permission: 'user.student.delete' }, callback: this.deleteUser }
      ]
    };
  },
  methods: {
    create: function() {
      this.$router.push({ path: '/user/student/create' });
    },
    // 详情
    study: function({ row }) {
      this.$router.push({ path: '/user/student/' + row.id + '/study' });
    },
    // 开课
    openCourse: function ({ row }) {
      this.$router.push({ path: '/user/student/' + row.id + '/course' });
    },
    // 编辑
    edit: function({ row }) {
      this.$router.push({ path: '/user/student/' + row.id + '/edit' });
    },
    // 证书
    cert: function({ row }) {
      this.$router.push({ path: '/user/student/' + row.id + '/cert' });
    },
    // 删除
    deleteUser: function({ row }) {
      this.$box
        .confirm('确认删除吗')
        .then(() => {
          this.$http.delete(
            '/user/admin/account/' + row.id,
            {},
            response => {
              this.$message.success(response.msg, _ => {
                this.reload();
              });
            },
            error => {
              this.$message.error(error.msg);
            }
          );
        })
        .catch(() => {});
    },
    // 批量禁用
    disable: function({ rows }) {
      var ids = rows.map(row => row.id);
      if (ids.length === 0) {
        this.$message.warning('请选择要禁用的课程');
        return false;
      }
      this.$box
        .confirm('确认禁用吗')
        .then(() => {
          this.$http.put(
            '/user/admin/account/disables',
            {
              ids: ids
            },
            response => {
              this.$message.success(response.msg, _ => {
                this.reload();
              });
            },
            error => {
              this.$message.error(error.msg);
            }
          );
        })
        .catch(() => {});
    },
    // 批量启用
    enable: function({ rows }) {
      var ids = rows.map(row => row.id);
      if (ids.length === 0) {
        this.$message.warning('请选择要启用的课程');
        return false;
      }
      this.$box
          .confirm('确认启用吗')
          .then(() => {
            this.$http.put(
                '/user/admin/account/enables',
                {
                  ids: ids
                },
                response => {
                  this.$message.success(response.msg, _ => {
                    this.reload();
                  });
                },
                error => {
                  this.$message.error(error.msg);
                }
            );
          })
          .catch(() => {});
    },
    // 批量删除
    deletes: function({ rows }) {
      var ids = rows.map(row => row.id);
      if (ids.length === 0) {
        this.$message.warning('请选择要删除的课程');
        return false;
      }
      ids = ids.join(',');
      this.$box
        .confirm('确认删除吗')
        .then(() => {
          this.$http.delete(
            '/user/admin/account/deletes/' + ids,
            {},
            response => {
              this.$message.success(response.msg, _ => {
                this.reload();
              });
            },
            error => {
              this.$message.error(error.msg);
            }
          );
        })
        .catch(() => {});
    },
    // 导入菜单操作
    menuClick: function(command) {
      if (command === 'download') {
        window.open('/template/excel/导入学员模板.xlsx', '_blank');
      } else {
        this.importVisible = true;
      }
    }
  }
};
</script>
<style scoped>
.import-student {
  margin-right: 20px;
}
</style>
